<template>
	<main class="inner-page">
		<div class="nav-wrap">
			<div class="nav">
				<van-icon name="location"/>
				<van-dropdown-menu class="flex-1">
					<van-dropdown-item v-model="shopCondition.locate" :options="locateOptions" @change="locateChange"/>
<!--					<van-dropdown-item v-model="sortType" :options="sortOptions" @change="sortChange"/>-->
				</van-dropdown-menu>
				<div class="div-show-amount" v-if="shopList&&shopList.length>0">
					为您找到 <span class="txt-primary">53</span> 家好店
				</div>
				<div class="div-filter" @click="displayFilterSheet">筛选 <van-icon name="filter-o"/></div>
			</div>
		</div>
		<van-list v-if="shopList&&shopList.length>0"
				  :finished="pager.finished" v-model:loading="pager.loading" v-model:error="pager.error" error-text="请求失败，点击重新加载">
			<template #finished><van-divider>没有更多了</van-divider></template>
			<shop-item v-for="item in shopList" :shop="item" key="item.shopId"/>
		</van-list>
		<van-empty v-else image="search" description="很抱歉，暂无结果~" />
		<search-shop-condition @handle-search="getNewCondition" :locate-able="false" ref="refSearchCondition"/>
	</main>
</template>
<style lang="scss" scoped>
.inner-page{

}
.nav-wrap{height:40px;}
.nav{
	--van-dropdown-menu-height:40px;
	font-size:14px;color:var(--font-second-color); height:40px;width:100%;display:flex;align-items: center; padding:0 10px;
	background-color:var(--white-color);box-shadow: var(--van-dropdown-menu-shadow);
	position:fixed;z-index:2;top:54px;left:0;
	&>.van-icon{color:var(--font-third-color)}
	:deep(.van-dropdown-menu__bar){box-shadow:none;}
	:deep(.van-dropdown-menu__item){
		flex:none;justify-content: flex-start;padding-right:5px; margin-right:10px;
		&:first-child{
			.van-dropdown-menu__title{padding-left:2px;font-size:14px;}
		}
	}
	:deep(.van-dropdown-item__option){
		height: 40px; line-height: 20px;
	}
	.div-filter{
		height:24px;display:flex; align-items: center; padding-left:8px; border-left:1px solid var(--border-lighter-color);
		.van-icon{font-size:20px;}
	}
	.div-show-amount{
		height:30px;padding:0 4px; line-height:30px; margin-right:10px; font-size:14px; color:var(--font-third-color);
	}
}
</style>
<script lang="ts" setup>
defineOptions({name:'searchShop'})
import {SearchShopsCondition} from '@/types'

//props
const props =defineProps({
})
//data
const {searchKey,shopCondition,pager,} = useSearch()//从hooks中解构查询页所需的响应式变量

const refSearchCondition=ref()
shopCondition.locate='59-591'
shopCondition.catIds =['01','03','04']
//todo: 以上强行设置只是为了做页面测试

const locateOptions=[// todo: 通过用户类型、用户信息读取可选的地址信息
	{ text: '北京 - 东城区', value: 'Hangzhou' },
	{ text: '浙江 - 杭州', value: 'Ningbo' },
	{ text: '新疆 - 乌鲁木齐', value: 'Wenzhou' },
	{ text: '广西 - 南宁', value: '59-591' },
	{ text: '黑龙江 - 齐齐哈尔', value: 'Huzhou' },
]

//查询结果列表
const shopList = ref(<Array<any>>[])
shopList.value = [
	{
		shopId: 'ZBCU4321',  //string '店铺id',
		shopShortName: '大沃尔科技全国连锁旗舰店',  //string '店铺简称',
		logoPath: 'https://cbu01.alicdn.com/img/ibank/O1CN017oL5fb1Bs2q98efJU_!!0-0-cib.jpg',  //string '店铺logo',
		shopType: '',  //string 店铺类型,
		shopCat: '手机 | 智能终端 | 行业模组 | 3C配件 | 权益 | 电商百货', //string 主营范围，为商品分类若干一级节点编号，逗号隔开的字串
		offlineSupported: '1', //string 是否支持线下支付0否 1支持
		hotShowSupported: '1', //string 是否热门店铺 0否 1支持
		cloubSupplier: '0', //string 是否优品小店供货商 0否 1是
		allowBackDay: 7,  //number允许退货天数
		createTime: '2018-01-21', //string 开店时间
		offers: [
			{
				gdsId: '商品id1',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01cMmiAS1gRFf71suul_!!2211261674138-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
			{
				gdsId: '商品id2',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01nY2rAg1gRFhjZb7JE_!!2211261674138-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
			{
				gdsId: '商品id3',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01dijmTp27YZbRRRIXV_!!2211851637809-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
			{
				gdsId: '商品id4',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01gSau2e1Mr5h96OI0r_!!2361561487-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
			{
				gdsId: '商品id5',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01zFXpY01FbnCiGKtVM_!!2207691150506-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
		],
	},
	{
		shopId: 'ZBCU4643',  //string '店铺id',
		shopShortName: '大沃尔科技全国连锁旗舰店',  //string '店铺简称',
		logoPath: 'https://cbu01.alicdn.com/img/ibank/O1CN017oL5fb1Bs2q98efJU_!!0-0-cib.jpg',  //string '店铺logo',
		shopType: '',  //string 店铺类型,
		shopCat: '手机 | 智能终端 | 行业模组 | 3C配件 | 权益 | 电商百货', //string 主营范围，为商品分类若干一级节点编号，逗号隔开的字串
		offlineSupported: '1', //string 是否支持线下支付0否 1支持
		hotShowSupported: '1', //string 是否热门店铺 0否 1支持
		cloubSupplier: '0', //string 是否优品小店供货商 0否 1是
		allowBackDay: 7,  //number允许退货天数
		createTime: '2018-01-21', //string 开店时间
		offers: [
			{
				gdsId: '商品id1',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01cMmiAS1gRFf71suul_!!2211261674138-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
			{
				gdsId: '商品id2',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01nY2rAg1gRFhjZb7JE_!!2211261674138-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
			{
				gdsId: '商品id3',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01dijmTp27YZbRRRIXV_!!2211851637809-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
			{
				gdsId: '商品id4',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01gSau2e1Mr5h96OI0r_!!2361561487-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
			{
				gdsId: '商品id5',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01zFXpY01FbnCiGKtVM_!!2207691150506-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
		],
	},
	{
		shopId: 'ZBCU4121',  //string '店铺id',
		shopShortName: '大沃尔科技全国连锁旗舰店',  //string '店铺简称',
		logoPath: 'https://cbu01.alicdn.com/img/ibank/O1CN017oL5fb1Bs2q98efJU_!!0-0-cib.jpg',  //string '店铺logo',
		shopType: '',  //string 店铺类型,
		shopCat: '手机 | 智能终端 | 行业模组 | 3C配件 | 权益 | 电商百货', //string 主营范围，为商品分类若干一级节点编号，逗号隔开的字串
		offlineSupported: '0', //string 是否支持线下支付0否 1支持
		hotShowSupported: '1', //string 是否热门店铺 0否 1支持
		cloubSupplier: '1', //string 是否优品小店供货商 0否 1是
		allowBackDay: 7,  //number允许退货天数
		createTime: '2018-01-21', //string 开店时间
		offers: [
			{
				gdsId: '商品id1',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01CUphvP1n8CZOgqtOL_!!4275715044-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
		],
	},
	{
		shopId: 'ZBCU4821',  //string '店铺id',
		shopShortName: '大沃尔科技全国连锁旗舰店',  //string '店铺简称',
		logoPath: 'https://cbu01.alicdn.com/img/ibank/O1CN017oL5fb1Bs2q98efJU_!!0-0-cib.jpg',  //string '店铺logo',
		shopType: '',  //string 店铺类型,
		shopCat: '手机 | 智能终端 | 行业模组 | 3C配件 | 权益 | 电商百货', //string 主营范围，为商品分类若干一级节点编号，逗号隔开的字串
		offlineSupported: '0', //string 是否支持线下支付0否 1支持
		hotShowSupported: '0', //string 是否热门店铺 0否 1支持
		cloubSupplier: '1', //string 是否优品小店供货商 0否 1是
		allowBackDay: 7,  //number允许退货天数
		createTime: '2018-01-21', //string 开店时间
		offers: [
			{
				gdsId: '商品id1',
				gdsImg: 'https://cbu01.alicdn.com/img/ibank/O1CN01iWVdG41orpf3jDEsR_!!2215619905279-0-cib.220x220.jpg',
				gdsName: '商品名称商品名称商品名称商品名称',
				agentPrice: 320000, //number提货价，分(游客访问时该字段留空),
				guidePrice: 380000, //number指导价，分,
			},
		],
	},
]
const router=useRouter()

//methods
const toInputPage=()=>{
	let query:any ={}
	if(searchKey.value!==''){
		query.key=searchKey.value
	}
	router.push({path:'/shop/search/inputKey',query:query})
}
const locateChange=(value:string)=>{
	console.log(value)
	//todo: 自动触发从新查询
}
//打开筛选面板
const displayFilterSheet=()=>{
	refSearchCondition.value.displaySheet(shopCondition)
}
//筛选面板“确定”后，返回新的筛选条件
//todo: 这里同时要触发重新查询
const getNewCondition=(json:SearchShopsCondition)=>{
	shopCondition.shopType = json.shopType            //店铺类型
	shopCondition.provinceCode = json.provinceCode //string渠道收货地址省分，必填，用来约束店铺的业务省分范围（全国、某个指定省）
	shopCondition.catIds = json.catIds // string[] //主营范围：选择内容为商品类型树一级节点，可默认为空数组
	shopCondition.isHot = json.isHot    //0/1 是否热门店铺
	shopCondition.isCloubSupplier = json.isCloubSupplier // 0/1 是否优品小店供货商
}

</script>